<script setup>
import { ref } from "vue";
const props =defineProps(['percent'])
const closeDialogVisible = ref(true);

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
</script>
<template>
  <el-dialog
    v-model="closeDialogVisible"
    top="30vh"
    width="700px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div style="height: 150px;" class="update-dialog">
      <p style="font-size: 20px; font-weight: 600; color: #666;">正在更新,请稍等...</p>
      <el-progress :text-inside="true" :color="colors" :stroke-width="26" :percentage="props.percent" />
      <!-- <el-progress type="circle" :percentage="props.percent" /> -->
    </div>
  </el-dialog>
</template>
<style lang="scss">
.update-dialog {
  text-align: center;
  p {
    margin-bottom: 20px;
  }
}
</style>
